<template>
    <div>
        <el-card>
            <el-button @click="submit">确认</el-button>
            <el-button @click="createDateVisible = !createDateVisible">批量生成日期</el-button>
            <el-button @click="addVisible = !addVisible">添加新工序</el-button>
            <el-dialog v-model="createDateVisible" width="400">
                <el-form-item label="开始日期">
                    <el-date-picker v-model="startDate" type="date" class="dialog-input" />
                </el-form-item>
                <el-form-item label="日期间隔">
                    <el-input type="number" v-model.number="dateSpan" class="dialog-input" />
                </el-form-item>
                <div class="dialog-footer">
                    <el-button @click="createDate">确认</el-button>
                </div>
            </el-dialog>

        </el-card>
        <el-table :data="procedures" height="480" style="margin-top: 10px;">
            <el-table-column type="expand">
                <template #default="props">
                    <p>项目负责人：{{ props.row.EmployeeName }}</p>
                    <p>开始时间：{{ formatDate(props.row.BeginDate) }}</p>
                    <p>结束时间：{{ formatDate(props.row.EndDate) }}</p>
                    <p>项目注意事项：{{ props.row.Desc }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="ProcedureName" label="工序" />
            <el-table-column prop="Employee" label="项目负责人">
                <template #default="scope">
                    <UserSelect v-model="scope.row.Employee" v-model:label="scope.row.EmployeeName" />
                </template>
            </el-table-column>
            <el-table-column>
                <template #default="scope">
                    <el-button @click="showEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer destroy-on-close :append-to-body="true" v-model="editVisible" width="900" draggable>
            <procedure-allot-edit v-model="currentProcedure"></procedure-allot-edit>
        </el-drawer>
        <el-dialog destroy-on-close v-model="addVisible">
            <ProcedureAdd />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import projectInfoapi from '../../api/projectInfoapi';
    import procedureinfoapi from '../../api/procedureinfoapi';
    import userprocedureapi from '../../api/userprocedureapi';
    import ProcedureAllotEdit from './ProcedureAllotEdit.vue';
    import UserSelect from '../../components/UserSelect.vue';
    import ProcedureAdd from './ProcedureAdd.vue';

    const { id } = defineProps({
        id: {
            type: Number,
            required: true
        }
    })
    const emit = defineEmits(["onSave"])

    const project = ref<any>({})
    const procedures = ref<Array<any>>([])

    const currentProcedure = ref<any>({})
    const editVisible = ref(false)

    //#region 初始化数据
    projectInfoapi.get(id).then((res: any) => {
        // 获取项目
        project.value = res.data
    }).then(() => {
        // 获取工序
        procedureinfoapi.getByBusiness(project.value.BusinessType).then((res: any) => {
            procedures.value = res.data.map(item => {
                return {
                    ProjectId: project.value.Id,
                    ProjectName: project.value.ProjectName,
                    ProcedureName: item.ProcedureName,
                    Employee: null,
                    EmployeeName: "",
                    BeginDate: null,
                    EndDate: null,
                    Desc: item.ProcedureDesc,
                    ProcedureOrder: item.ProcedureOrder
                }
            })
            console.log(procedures.value);

        })
    })
    //#endregion

    // 显示工序编辑
    const showEdit = (procedure: any) => {
        currentProcedure.value = procedure
        editVisible.value = !editVisible.value
        // console.log(currentProcedure.value); 
    }

    //#region 确认分配
    const submit = () => {
        let procedure = procedures.value.find(o=>o.ProcedureOrder==1);
        procedure.Status = 1;
        console.log(procedures.value);
        userprocedureapi.add(procedures.value).then((res: any) => {
            if (res.code == 1) {
                ElMessage({
                    message: "分配成功",
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: "失败",
                    type: 'error'
                })
            }
            emit("onSave")
        })
    }
    //#endregion 

    //#region 批量生成时间
    const createDateVisible = ref(false)
    const startDate = ref<Date>(new Date()) // 开始时间
    const dateSpan = ref<number>(0) // 间隔时间

    const createDate = () => {
        createDateVisible.value = !createDateVisible.value
        if (!(startDate.value && dateSpan.value)) return
        procedures.value.reduce((accumulator, item) => {
            item.BeginDate = new Date(startDate.value);
            item.EndDate = new Date(startDate.value);
            item.BeginDate.setDate(startDate.value.getDate() + accumulator)
            item.EndDate.setDate(startDate.value.getDate() + accumulator + dateSpan.value)
            return accumulator + dateSpan.value
        }, 0);
    }
    //#endregion

    const addVisible = ref(false)
</script>

<style scoped>
    .dialog-footer {
        display: flex;
        flex-direction: row-reverse;
    }

    .dialog-input {
        width: 220px;
    }
</style>